<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: 孙立政
 * @Date: 2020-07-12 01:19:05
 * @LastEditors: 孙立政
 * @LastEditTime: 2023-02-01 16:02:41
-->
<template>
  <div id="data-view">
    <dv-full-screen-container v-if="ifdv">

      <top-header />

      <div class="main-content">
        <digital-flop :data1="datas"/>

        <div class="block-left-right-content">
          <ranking-board :data5="userdatalistuser"/>

          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <rose-chart />

              <water-level-chart  :data3="datas"/>

              <scroll-board v-if="isShow" :data4='datalist'/>
            </div>

            <div style="height: 45%;">
              <cards :data2="datas"/>
            </div>

          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import {
  davdata,
  datalist,
  datalistuser
} from '../api/index'
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import cards from './cards'

export default {
  name: 'DataView',
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards
  },
  data () {
    return {
      datas: '',
      datalist: '',
      userdatalistuser: '',
      ifdv: false,
      gettime: '',
      isShow: false,
      isShow2: false
    }
  },
  created () {
    let self = this
    self.getData()
    this.getList()
    this.getListUser()
    setInterval(function () {
      self.getData()
      self.getList()
      self.getListUser()
    }, 60000)
    this.getTime()
    // this.getData();
  },
  methods: {
    getTime: function () {
      var _this = this
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      if (mm < 10) {
        mm = '0' + mm
      }
      if (dd < 10) {
        dd = '0' + dd
      }
      _this.gettime = yy + '-' + mm + '-' + dd
    },
    getData () {
      let self = this
      let data = {
        region_id: 1,
        date_time: self.gettime
      }
      davdata(data).then(res => {
        self.datas = res.data.data
        self.ifdv = true
      }).catch(e => {
        console.log(e)
      })
    },
    getList () {
      let self = this
      let data = {
        region_id: 1,
        date_time: self.gettime
      }
      datalist(data).then(res => {
        let datalists = res.data.data.lists
        let newarry = []
        datalists.map(item => {
          let arr = []
          arr.push(item.region_name)
          arr.push(item.name)
          arr.push(String(item.actual_pay_money))
          arr.push(String(item.discount_amount))
          // arr.push(String(item.market_server_free_money));
          arr.push(String(item.pay_money))
          newarry.push(arr)
        })
        self.datalist = newarry

        this.isShow = true
      }).catch(e => {
        console.log(e)
      })
    },
    getListUser () {
      let self = this
      let data = {
        region_id: 1,
        date_time: self.gettime
      }
      datalistuser(data).then(res => {
        this.isShow2 = true
        let datalists = res.data.data.lists
        let newarry = []
        datalists.map(item => {
          let arr = []
          arr.push(item.region_name)
          arr.push(item.name)
          arr.push(String(item.actual_pay_money))
          newarry.push(arr)
        })
        self.userdatalistuser = newarry
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="less">
  #data-view {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;

    #dv-full-screen-container {
      background-image: url('./img/bg.png');
      background-size: 100% 100%;
      box-shadow: 0 0 3px blue;
      display: flex;
      flex-direction: column;
    }

    .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .block-left-right-content {
      flex: 1;
      display: flex;
      margin-top: 20px;
    }

    .block-top-bottom-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-left: 20px;
    }

    .block-top-content {
      height: 55%;
      display: flex;
      flex-grow: 0;
      box-sizing: border-box;
      padding-bottom: 20px;
    }
  }
</style>
